<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form lay-filter="systemOfficialInfoForm" class="layui-form model-form" id="systemOfficialInfoForm">
                <input id="id" name="id" type="hidden"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">系统名称</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="sysName" placeholder="请输入系统名称" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">名称支持汉字、英文、字母，举例：智慧云端</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">域名</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="domainName" placeholder="请输入域名" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">不用输入http://或者https://,直接输入www.xxx.com</div>
                </div>
                <!--<div class="layui-form-item">
                    <label class="layui-form-label">CNAME地址</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="canme" placeholder="请输入CNAME地址" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">ICP备案号</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="icp" placeholder="请输入ICP备案号" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">例如：湘ICP201122-1</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公司名字</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="companyName" placeholder="请输入公司名字" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">例如：湖南省娄底市移动公司</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">站点描述</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="siteDescription" placeholder="请输入站点描述" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">例如：中国三大运营商之一</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="keywords" placeholder="请输入关键词" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">例如：5G，运营商</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">icon</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 500px;">
                            <div id="btnUpload1" class="layui-btn" style="float: left;"><i
                                    class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload1_path" class="imgBox"></div>
                            <input id="icon" name="icon" type="hidden"/>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            请上传png或者ico文件，尺寸32px*32px
                            ,<a href="https://www.bitbug.net/" target="_blank" >【点这里】 </a>生成ico文件。
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">前台LOGO</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 450px;">
                            <div id="btnUpload2" class="layui-btn" style="float: left;">
                                <i class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload2_path" class="imgBox"></div>
                            <input id="foregroundLogo" name="foregroundLogo" type="hidden"/>
                        </div>
                        <a  class="layui-btn layui-btn-danger layui-btn-xs delBtn" bandName="foregroundLogo">删除</a>
                        <div class="layui-form-mid layui-word-aux">请上传背景透明的png文件，尺寸420px*77px,该LOGO将显示在前台官网、登陆页面和APP浅色背景的展示页面。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后台LOGO</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 450px;">
                            <div id="btnUpload3" class="layui-btn" style="float: left;">
                                <i class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload3_path" class="imgBox"></div>
                            <input id="foregroundInverseLogo" name="foregroundInverseLogo" type="hidden"/>
                        </div>
                        <a class="layui-btn layui-btn-danger layui-btn-xs delBtn" bandName="foregroundInverseLogo">删除</a>
                        <div class="layui-form-mid layui-word-aux">请上传背景透明的png文件，尺寸420px*77px,该LOGO将显示在企业管理系统后台页面顶部左上角，可视化报表页面。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">前台反白LOGO</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 450px;">
                            <div id="btnUpload4" class="layui-btn" style="float: left;">
                                <i class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload4_path" class="imgBox"></div>
                            <input id="backgroundLogo" name="backgroundLogo" type="hidden"/>
                        </div>
                        <a class="layui-btn layui-btn-danger layui-btn-xs delBtn" bandName="backgroundLogo">删除</a>
                        <div class="layui-form-mid layui-word-aux">请上传背景透明的png文件，尺寸420px*77px,该LOGO将显示在前台和APP深色背景的展示页面，以及柜子控制面板。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公众号码</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 500px;">
                            <div id="btnUpload5" class="layui-btn" style="float: left;"><i
                                    class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload5_path" class="imgBox"></div>
                            <input id="publicNumber" name="publicNumber" type="hidden"/>
                        </div>
                        <div class="layui-form-mid layui-word-aux">请上传公众号二维码，尺寸300px*300px,将展现在企业官网前台，底部、联系联系方式页面或者引导页。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商小程序码</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 500px;">
                            <div id="btnUpload6" class="layui-btn" style="float: left;"><i
                                    class="layui-icon">&#xe681;</i>上传图片
                            </div>
                            <div id="btnUpload6_path" class="imgBox"></div>
                            <input id="vendorApplets" name="vendorApplets" type="hidden"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">版权信息</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="copyright" placeholder="请输入版权信息" type="text" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">技术联系人</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="technicist" placeholder="请输入技术联系人" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人手机号</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="phone" placeholder="请输入联系人手机号" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人email</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="email" placeholder="请输入联系人email" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">座机号码</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="landlineNumber" placeholder="请输入座机号码" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">PC统计代码</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="pcCount" placeholder="请输入PC统计代码" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">PC端前台页面底部可以显示第三方统计</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商统计代码</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="supplierCount" placeholder="请输入供应商统计代码" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">供应商端前台页面底部可以显示第三方统计</div>
                </div>
                <div class="layui-form-item text-right">
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                    <button class="layui-btn" lay-filter="systemOfficialInfoFormSubmit" lay-submit>保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    #systemOfficialInfoForm .layui-form-label {
        width: 100px;
        padding-left: 0;
    }

    #systemOfficialInfoForm .layui-input-block {
        margin-left: 120px;
    }

    .imgBox {
        margin-left: 30px;
        float: left;
        width: 300px;
        height: 40px;
        overflow: hidden;
    }

    .imgBox > img {
        max-width: 300px;
        max-height: 40px;
    }
    .textInputBox{
        width: 500px !important;
    }
    .delBtn{
        margin: 9px;
        float: left;
    }
</style>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        $("body").delegate(".checkImg", "click", function () {
            admin.previewImg(this)
        })
        list();

        //初始化表单
        function list() {
            admin.req('enterprise/system/admin/systemOfficialInfo/list', {}, function (res) {
                form.val("systemOfficialInfoForm", res.data[0]);
                if (res.data[0].icon != "") {
                    $('#btnUpload1_path').html('<img src="' + res.data[0].icon + '" style="height: 32px;width: 32px" />');
                }
                if (res.data[0].foregroundLogo != "") {
                    $('#btnUpload2_path').html('<img class="checkImg" src="' + res.data[0].foregroundLogo + '" style="height: 50px;width: auto; max-width: 300px" />');
                } else {
                    $('#btnUpload2_path').html('<img class="checkImg" src="assets/images/initial-logo.png" style="height: 50px;width: auto" />');
                }
                if (res.data[0].foregroundInverseLogo != "") {
                    $('#btnUpload3_path').html('<img class="checkImg" src="' + res.data[0].foregroundInverseLogo + '" style="height: 46px;width: 250px" />');
                } else {
                    $('#btnUpload3_path').html('<img class="checkImg" src="assets/images/initial-logo.png" style="height: 50px;width: auto" />');
                }
                if (res.data[0].backgroundLogo != "") {
                    $('#btnUpload4_path').html('<img class="checkImg" src="' + res.data[0].backgroundLogo + '" style="height: 46px;width: 250px" />');
                } else {
                    $('#btnUpload4_path').html('<img class="checkImg" src="assets/images/initial-logo.png" style="height: 50px;width: auto" />');
                }

                if (res.data[0].publicNumber != "") {
                    $('#btnUpload5_path').html('<img class="checkImg" src="' + res.data[0].publicNumber + '" style="height: 50px;width: 66px" />');
                }
                if (res.data[0].vendorApplets != "") {
                    $('#btnUpload6_path').html('<img class="checkImg" src="' + res.data[0].vendorApplets + '" style="height: 50px;width: 66px" />');
                }
                form.render();
            }, 'GET');
        }

        //查询企业信息
        var enterpriseInfo;
        admin.req('enterprise/system/admin/enterpricceId/getEnterpricceIdVO', {}, function (res) {
            enterpriseInfo = res.data;
        }, 'get', false);
        if ("" == enterpriseInfo || null == enterpriseInfo) {
            layer.msg("企业信息获取异常", {icon: 1});
            return;
        }
        //var productCode = $("input[name='productCode']").val();
        upload.render({
            elem: '#btnUpload1'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|ico'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload1_path').html('<img src="' + imagUrl + '" style="height: 32px;width: 32px;" />');
                    $('#icon').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });

        upload.render({
            elem: '#btnUpload2'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload2_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#foregroundLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload3'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload3_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#foregroundInverseLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload4'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    // layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload4_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#backgroundLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload5'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload5_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#publicNumber').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload6'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload6_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#vendorApplets').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });
        // 显示编辑弹窗enterprise/system/admin/systemOfficialInfo/update
        form.on('submit(systemOfficialInfoFormSubmit)', function (d) {
            console.log(d.field)
            if ($("#id").val() != "") {
                admin.req('enterprise/system/admin/systemOfficialInfo/update', d.field, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    list();
                }, 'PUT');
            } else {
                admin.req('enterprise/system/admin/systemOfficialInfo/add', d.field, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    list();
                }, 'POST');
            }
            return false;
        });

        $('.delBtn').click(function () {
            $('#'+$(this).attr('bandname')).val('');
            $('#'+$(this).attr('bandname')).prev().html('')
        })
    });
</script>